// co2
(function () {
    var co2Div = document.getElementById('co2');
    var co2Chart = echarts.init(co2Div);
    var option;

    option = {
        title: {
            text: '二氧化碳含量变化值',
            textStyle: {
                color: '#fff'
            },
            left: '2%',
            top: '5%'
        }, xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF3962'
                    }, {
                        offset: 1,
                        color: '#4075FF'
                    }]),
                }
            }
        }],
        grid: {
            bottom: '10%'
        }
    }

    option && co2Chart.setOption(option);
})();

// ch4
(function () {
    var ch4Div = document.getElementById('ch4');
    var ch4Chart = echarts.init(ch4Div);
    var option;

    option = {
        title: {
            text: '甲烷含量变化值',
            textStyle: {
                color: '#fff'
            },
            left: '2%',
            top: '5%'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        series: [{
            data: [100, 90, 120, 110, 100, 130, 110],
            type: 'line',
            smooth: true,
            areaStyle: {},
            itemStyle: {
                normal: {
                    //折线图区域颜色渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#FFF05F' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#01132C' // 100% 处的颜色
                    }]
                    ), //背景渐变色   

                }
            }
        }],
        grid: {
            bottom: '10%'
        }
    };

    option && ch4Chart.setOption(option);

})();

//n20
(function () {

    var n20Div = document.getElementById('n20');
    var n20Chart = echarts.init(n20Div);
    var option;
    option = {
        title: {
            text: '氧化亚氮变化值',
            left: 'center',
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        color:['#FF3962', '#FE9644', '#FFF05F','#33D9E2','#4075FF','#886CF7','#E86CF7'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 20,
            textStyle: {
                color: '#fff'
            },
            top: 20,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                center: ['50%', '60%'],
                data: [
                    { value: 1048, name: '周一' },
                    { value: 735, name: '周二' },
                    { value: 580, name: '周三' },
                    { value: 484, name: '周四' },
                    { value: 300, name: '周五' },
                    { value: 280, name: '周六' },
                    { value: 350, name: '周日' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && n20Chart.setOption(option);
})();

//hfcs
(function () {

    var hfcsDiv = document.getElementById('hfcs');
    var hfcsChart = echarts.init(hfcsDiv);
    var option;

    option = {
        title: {
            text: '氢氟碳化物变化值',
            left: '10',
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: {
                color: '#5470C6',
                width: 4,
                type: 'dashed'
            },
            itemStyle: {
                borderWidth: 3,
                borderColor: '#EE6666',
                color: 'yellow'
            }
        }]
    };

    option && hfcsChart.setOption(option);

})();

//pfcs
(function () {

    var pfcsDiv = document.getElementById('pfcs');
    var pfcsChart = echarts.init(pfcsDiv);
    var option;

    option = {
        title: {
            text: '全氟碳化物变化值',
            left: '10',
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            }
        },
        series: [{
            data: [120, 100, 90, 110, 130, 80, 100],
            type: 'line',
            areaStyle: {},
            itemStyle: {
                normal: {
                    //折线图区域颜色渐变
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#FF3962' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#01132C' // 100% 处的颜色
                    }]
                    ), //背景渐变色   

                }
            }
        }]
    };

    option && pfcsChart.setOption(option);

})();

//sf6
(function () {

    var sf6Div = document.getElementById('sf6');
    var sf6Chart = echarts.init(sf6Div);
    var option;

    option = {
        title: {
            text: '六氟化硫变化值',
            left: '10',
            textStyle: {
                color: '#fff'
            },
            top: '15%'
        },
        color: ['#FF3962','#FE9644','#FFF05F','#33D9E2','#4075FF','#886CF7','#E86CF7'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#fff'
            },
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '63%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '周一' },
                    { value: 735, name: '周二' },
                    { value: 580, name: '周三' },
                    { value: 484, name: '周四' },
                    { value: 300, name: '周五' },
                    { value: 320, name: '周六' },
                    { value: 210, name: '周日' },
                ]
            }
        ]
    };

    option && sf6Chart.setOption(option);
})();